import { ReactNode } from 'react'
import { useAuthStore } from '@/stores/auth-store'
import { useHasPermission, useHasRole, type Role, type Permission } from '@/hooks/use-permissions'
import { UnauthorisedError } from '@/features/errors/unauthorized-error'

interface PermissionGuardProps {
  /**
   * 需要的角色，满足其中一个即可
   */
  roles?: Role | Role[]
  /**
   * 需要的权限，满足其中一个即可
   */
  permissions?: Permission | Permission[]
  /**
   * 子组件
   */
  children: ReactNode
  /**
   * 未授权时显示的组件
   */
  fallback?: ReactNode
}

/**
 * 权限保护组件
 * 只有满足指定角色或权限的用户才能访问子组件
 */
export function PermissionGuard({
  roles,
  permissions,
  children,
  fallback
}: PermissionGuardProps) {
  const { auth } = useAuthStore()
  
  // 检查用户是否已认证
  const isAuthenticated = !!auth.accessToken && !!auth.user
  
  // 如果用户未认证，显示未授权页面
  if (!isAuthenticated) {
    return fallback || <UnauthorisedError />
  }
  
  // 如果指定了角色，检查角色
  if (roles) {
    const hasRole = useHasRole(roles)
    if (hasRole) {
      return <>{children}</>
    }
  }
  
  // 如果指定了权限，检查权限
  if (permissions) {
    const hasPermission = useHasPermission(permissions)
    if (hasPermission) {
      return <>{children}</>
    }
  }
  
  // 如果既没有指定角色也没有指定权限，显示未授权页面
  if (!roles && !permissions) {
    return <>{children}</>
  }
  
  // 如果不满足条件，显示未授权页面
  return fallback || <UnauthorisedError />
}